<h1><%= t(".title") %></h1>

<%= render :partial => "navi" %>

<div id="molecule-search">
  <% form_tag(molecules_path, :method => "get", :id => "kegg-search") do %>
  <ol>
    <li>
      <%= text_field_tag(:query, "Search for a molecule...", :title => t('.tooltip.search')) %>
    </li>
  </ol>
  <% end %>

  <div id="selected-molecule"></div>
</div>

<% form_for(@job) do |form| %>
<%= form.error_messages %>
<%= form.hidden_field(:mol_file) %>
<ol>
  <li>
    <%= render :partial => "additional_parameters", :locals => { :form => form } %>
  </li>
  <li>
    <%= form.submit(t('generic.submit'), :title => t('.tooltip.submit')) %>
  </li>
</ol>
<% end %>

<% content_for :javascript do %>
$(document).ready(function() {
  $("#kegg-search input").autocomplete({
    source: '<%= molecules_path %>',
    minLength: 3,
    select: function(event, ui) {
      $.getScript('<%= molecules_path %>/' + ui.item.id)
      flash("notice", "<%= t('notifications.jobs.new.molecule_selected') %>");
    }
  }).focus(function() {
    if ($(this).val() == "<%= t('.search') %>")
      $(this).val("")
  }).blur(function  () {
    if ($(this).val() == "")
      $(this).val("<%= t('.search') %>")
  }).keypress(function(key) {
    if (key.which == 13)
      return false;
  });
});
<% end %>
